import React, { Component } from 'react';
import { Message, Dialog, Button, Form, Input, Field, NumberPicker, Switch, TreeSelect, Tag, Select } from '@alifd/next';
import { areas, insert } from '../../../../api/Area';
import { Forest } from '../../../../libs/Tree';
import '../AreaTable.scss';
import eventProxy from '../../../../libs/eventProxy';

const FormItem = Form.Item;

export default class AddDialog extends Component {
  static displayName = 'AddDialog';

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      dataIndex: null,
      dataSource: [],
    };
    this.field = new Field(this);
  }
  
 componentWillMount() {
   this.oth_fields = {
    sort: 0,
    parentId: null,
  };
 }

 updateSelect(){
  areas().then((response) => {
    const data = response.data.data;
    const shows = [];
    data.forEach((ele) => {
      // ele.label = ele.name;
      // ele.key = ele.id;
      shows.push({
        label: ele.name,
        key: ele.id,
        pid: ele.parentId,
        id: ele.id,
        value: ele.id,
      });
    });
    const treeData = this.dataToTree(shows);
    this.setState({
      dataSource: treeData,
      visible: true,
    });
  });
 }
 dataToTree= (dataSource) => {
  const forest = new Forest();
  dataSource.forEach((menu) => {
    menu.pid = menu.pid;
    menu.children = [];
    forest.init(menu);
  });
  return forest.roots;
}

  handleSubmit = () => {
    this.field.validate((errors, values) => {
      if (errors) {
        console.log('Errors in form!!!');
        return;
      }
      const { dataIndex } = this.state;
      values.parentId = this.oth_fields.parentId;
      values.type = this.oth_fields.type;
      values.sort = this.oth_fields.sort;
      if (values.useable === undefined){
        values.useable = 0;
      }
      this.props.getFormValues(dataIndex, values);
     insert(values).then((response) => {
       const data = response.data;
       if (data.code === 200) {
         Message.success('添加成功');
         this.setState({
           visible: false,
         });
         eventProxy.trigger('area:list:change');
       }
     });
    });
  };

  onOpen = () => {
    this.updateSelect();
  };

  onClose = () => {
    this.setState({
      visible: false,
    });
  };

  onSortChange = (value) => {
    this.oth_fields.sort = value;
  }

  handleChange =(value) => {
    this.oth_fields.parentId = value;
  }
  onSelectChange =(value) => {
    this.oth_fields.type = value;
  }
  render() {
    const init = this.field.init;
    const formItemLayout = {
      labelCol: {
        fixedSpan: 6,
      },
      wrapperCol: {
        span: 16,
      },
    };
    const Option = Select.Option;
    return (
      <div style={styles.editDialog}>
        <Button type="primary" onClick={this.onOpen} >
        新增区域
        </Button>
        <Dialog
          style={{ width: 640 }}
          visible={this.state.visible}
          onOk={this.handleSubmit}
          closeable="esc,mask,close"
          onCancel={this.onClose}
          onClose={this.onClose}
          title="新增"
        >
          <Form field={this.field} {...formItemLayout}>

            <FormItem label="上级区域：" >
              <TreeSelect treeDefaultExpandAll 
                dataSource={this.state.dataSource} 
                onChange={this.handleChange} 
                style={{ width: 220 }} 
              />
            </FormItem>

            <FormItem label="区域名称：" >
              <Input
                {...init('name', {
                  rules: [{ required: true, message: '必填选项' }],
                })}
              />
            </FormItem>

            <FormItem label="区域代码：" >
              <Input
                {...init('code', {
                  rules: [{ required: true, message: '必填选项' }],
                })}
              />
            </FormItem>

            <FormItem label="区域类型：" {...formItemLayout}>
              <Select id="basic-demo" onChange={this.onSelectChange} defaultValue="2">
                <Option value="0">国家</Option>
                <Option value="1">省</Option>
                <Option value="2">市</Option>
                <Option value="3">区县</Option>
              </Select>
            </FormItem>

            <FormItem label="排序：" >
              <NumberPicker type="inline" defaultValue={this.oth_fields.sort} onChange={this.onSortChange} />
            </FormItem>
          </Form>
        </Dialog>
      </div>
    );
  }
}

const styles = {
  editDialog: {
    display: 'inline-block',
    marginRight: '5px',
  },
};
